<!--  -->
<template>
  <div class="order-box">
    <div class="searct-box">
      <el-select size="smal" v-model="searchForm.order_type" class="select">
        <el-option label="全部类型" :value="0"></el-option>
        <el-option label="购买" :value="1"></el-option>
        <el-option label="出售" :value="2"></el-option>
      </el-select>
      <el-select size="smal" v-model="searchForm.legal_tender" class="select">
        <el-option label="全部法币币种" :value="0"></el-option>
        <el-option label="CNY/￥" :value="1"></el-option>
        <el-option label="VND/₫" :value="2"></el-option>
        <el-option label="INR/₹" :value="3"></el-option>
      </el-select>
      <el-select size="smal" v-model="searchForm.all_coin" class="select">
        <el-option label="全部数字货币" :value="0"></el-option>
      </el-select>
      <el-radio-group v-model="searchForm.year" class="radio-group">
        <el-radio-button label="半年内"></el-radio-button>
        <el-radio-button label="半年前"></el-radio-button>
      </el-radio-group>
    </div>
    <table class="table-box">
      <thead>
        <tr>
          <th class="order">订单号</th>
          <th class="type">类型</th>
          <th class="status">状态</th>
          <th class="pair">币种对</th>
          <th class="price">价格</th>
          <th class="amount">数量</th>
          <th class="money">金额</th>
          <th class="order-time">下单时间</th>
          <th class="operation">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="order">200119081302998</td>
          <td class="type">出售</td>
          <td class="status">已完成</td>
          <td class="pair">USDT / CNY</td>
          <td class="price">6.78 CNY</td>
          <td class="amount">307.84 USDT</td>
          <td class="money">2,087.15 CNY</td>
          <td class="order-time">2020-01-19 08:13:03</td>
          <td class="operation">
            <i class="iconfont icon-xinxi"></i>
            <span @click="drawer=true">详情</span>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 订单详情抽屉 -->
    <el-drawer
      title="订单详情抽屉"         
      :visible.sync="drawer"
      :with-header="false"
      class="drawer-box"
      customClass="customWidth"
    >
      <div class="detail-box">
        <h2 class="title">购买USDT</h2>

        <div class="step-box">
          <div class="item">
            <i class="iconfont icon-tijiao"></i>
            <span class="tips">下订单</span>
          </div>
          <em class="line"></em>
          <div class="item">
            <i class="iconfont icon-tijiao"></i>
            <span class="tips">去线下付款</span>
          </div>
          <em class="line"></em>
          <div class="item">
            <i class="iconfont icon-tijiao"></i>
            <span class="tips">点击已付款</span>
          </div>
          <em class="line"></em>
          <div class="item">
            <i class="iconfont icon-tijiao"></i>
            <span class="tips">等待放币</span>
          </div>
        </div>
        <div class="detail-info-box">
          <h2>订单信息</h2>
          <ul class="list-box">
            <li>
              <span class="title">订单号</span>
              <span class="content">200119081302998</span>
            </li>
            <li>
              <span class="title">下单时间</span>
              <span class="content">2020-01-19 08:13:03</span>
            </li>
            <li>
              <span class="title">订单金额(CNY)</span>
              <span class="content">2,087.15</span>
            </li>
            <li>
              <span class="title">单价(CNY)</span>
              <span class="content">6.96</span>
            </li>
            <li>
              <span class="title">出售数量(USDT)</span>
              <span class="content">30,525.78</span>
            </li>
          </ul>
        </div>
        <div class="detail-info-box">
          <h2>买家信息</h2>
          <ul class="list-box">
            <li>
              <span class="title">买家姓名</span>
              <span class="content">徐金铭</span>
            </li>
            <li>
              <span class="title">法币注册时间</span>
              <span class="content">2019-11-24</span>
            </li>
            <li>
              <span class="title">认证等级</span>
              <span class="content">v3</span>
            </li>
            <li>
              <span class="title">成交单数</span>
              <span class="content">2,016</span>
            </li>
            <li>
              <span class="title">完成率</span>
              <span class="content">99.35%</span>
            </li>
            <li>
              <span class="title">平均放币时间</span>
              <span class="content">01′19″</span>
            </li>
          </ul>
        </div>
      </div>

      <div class="form-box">
        <div class="btn-box">
          <el-button class="btn" @click="drawer=false">加入黑名单</el-button>
          <el-button type="primary" class="btn">资金划转</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        order_type: 0, //订单类型
        legal_tender: 0, //法币类型
        all_coin: 0, //数字货币类型
        year: "半年内" //半年内，半年前
      },
      ops: {
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: true,
          keepShow: false,
          background: "#80ffff ",
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: false,
          size: "6px",
          disable: false
        }
      },
      drawer: false
    };
  },
  created() {},
  mounted() {}
};
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.order-box {
  .searct-box {
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .select {
      width: 140px;
      margin-right: 30px;
    }
  }
  .table-box {
    text-align: left;
    font-size: 14px;
    .order {
      width: 136px;
      text-align: left;
    }
    .type {
      width: 70px;
    }
    .status {
      width: 80px;
    }
    .pair {
      width: 100px;
    }
    .price {
      width: 80px;
    }
    .amount {
      width: 102px;
    }
    .money {
      width: 107px;
    }
    .order-time {
      width: 146px;
    }
    .operation {
      width: 114px;
      text-align: right;
    }
    thead {
      height: 34px;
      tr {
        th {
          color: rgba(0, 0, 0, 0.43);
          font-weight: normal;
          border-bottom: 1px solid #e9e9e9;
        }
      }
    }
    tbody {
      height: 52px;
      .operation {
        display: flex;
        align-items: center;
        height: 52px;
        justify-content: flex-end;
        span {
          color: red;
          display: inline-block;
          padding: 2px 10px;
          background: hsla(2, 81%, 65%, 0.05);
          cursor: pointer;
        }
        i {
          font-size: 30px;
          color: #3075ee;
          margin-right: 5px;
        }
      }
      td {
        border-bottom: 1px solid #e9e9e9;
      }
    }
  }
}
</style>